<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../../css/api.css">
    <style>
    	.FNScanner{ position: fixed; width: 55%; height: 240px; border: 0 solid rgba(0,0,0,.4);  }
    	.FNScanner span{ width: 14px; height: 14px; position: absolute; border: 2px solid #d8be26; }
    	.FNScanner span:nth-child( 1 ){ left: 0; top: 0; border-width: 2px 0 0 2px; }
    	.FNScanner span:nth-child( 2 ){ right: 0; top: 0; border-width: 2px 2px  0 0; }
    	.FNScanner span:nth-child( 3 ){ right: 0; bottom: 0; border-width: 0 2px 2px 0; }
    	.FNScanner span:nth-child( 4 ){ left: 0; bottom: 0; border-width: 0 0 2px 2px; }
    	.FNScanner:after{  -webkit-animation: rotateAnim linear 3.68s infinite; animation: rotateAnim linear 3.68s infinite; content: ''; position: absolute; display: block; width: 100%; height: 2px; background-color: #d8be26; }
    	.hint{ position: fixed; bottom: 20%; line-height: 26px; font-size: 12px; color: #bababa; left: 0; text-align: center; width: 100%; }
    	.hint p{ color: #f3d41d; font-size: 12px; }
    	.ic-back1{ width: 50px; height: 55px; position: fixed; z-index: 1; background-position: center bottom; background-size: 18px auto; }
    @keyframes rotateAnim {
			from {
				top: 0;
			}
			to {
				top: 100%;
			}
		}
    	@-webkit-keyframes rotateAnim {
			from {
				top: 0;
			}
			to {
				top: 100%;
			}
		}
    </style>
</head>
<body>
	<div tapmode="opacity" onclick="api.closeWin();" class="ic-back1"></div>
	<div class="FNScanner">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div class="hint">
		将二维码放入框内，即可自动扫描
		<p>扫一扫，轻松绑定设备</p>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/base.js"></script>
<script type="text/javascript">
	var eHtml = $api.dom( 'html' );
	var FNScanner = $api.dom( '.FNScanner' );

	var h = (eHtml.offsetHeight - FNScanner.offsetHeight) / 2;
	var w = (eHtml.offsetWidth - FNScanner.offsetWidth) / 2;

	$api.css( FNScanner, 'border-width:'+h+'px '+w+'px '+h+'px '+w+'px;' );
</script>
</html>